<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>自定义节点折线图</title>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                background-color: #000;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }
            #main {
                width: 300px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>

        <!-- 引入 ECharts -->
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
        <script>
            const chartDom = document.getElementById("main");
            const myChart = echarts.init(chartDom);

            // 数据
            const categories = ["01", "02", "03", "04", "05", "06", "07"];
            const redData = [9, 8, 9, 1, 1, 6, 6];
            const yellowData = [13, 5, 8, 9, 6, 4, 4];

            const option = {
                backgroundColor: "#000",
                xAxis: {
                    type: "category",
                    data: categories,
                    boundaryGap: false,
                    axisLine: { lineStyle: { color: "#88888800" } },
                    axisLabel: { color: "#888" },
                },
                yAxis: {
                    type: "value",
                    min: 0,
                    max: 15,
                    interval: 3,
                    axisLine: { lineStyle: { color: "#888" } },
                    splitLine: { lineStyle: { color: "#222" } },
                    axisLabel: { color: "#888" },
                    name: "unit",
                    nameTextStyle: {
                        color: "#999",
                        padding: [0, 10, 0, 0],
                    },
                },
                grid: {
                    left: 30,
                    right: 20,
                    top: 30,
                    bottom: 30,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["红线", "黄线"],
                    textStyle: { color: "#fff" },
                    show: false,
                },
                series: [
                    {
                        name: "红线",
                        type: "line",
                        data: redData,
                        lineStyle: {
                            color: "#ff2d55",
                            width: 2,
                        },
                        symbol: "path://M960 64v896H64V64h896z m-64 64H128v768h768V128zM512 192a320 320 0 1 1 0 640A320 320 0 0 1 512 192z",
                        symbolSize: [10, 10],
                        itemStyle: {
                            color: "#ff2d55",
                        },
                    },
                    {
                        name: "黄线",
                        type: "line",
                        data: yellowData,
                        itemStyle: {
                            color: "#ffc300",
                        },
                        symbol: "path://M960 64v896H64V64h896z m-64 64H128v768h768V128zM512 192a320 320 0 1 1 0 640A320 320 0 0 1 512 192z",
                        symbolSize: [10, 10],
                        lineStyle: {
                            color: "#ffc300",
                            width: 2,
                        },
                    },
                ],
            };

            myChart.setOption(option);
        </script>
    </body>
</html>
